<template>
	<view class="content">
		<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="translate">
			<input type="text" value="" @input="inputData()" focus v-model="a" />
		</view>
		<view class="btn">
			<tui-button width="200rpx" shape="circle" @click="get()">点击</tui-button>
		</view>
		<view class="jieguo">
			翻译结果为：<picture>{{b}}</picture>
		</view>
	</view>
</template>

<script>
	import md5 from 'js-md5'
	import axios from 'axios'
	import Qs from 'qs'

	var a = "";
	var b = "";
	var c=['zh','en','jp'];
	export default {
		data() {
			return {
				title: '驼峰命名翻译',
				a: a,
				b: b,
		
			}
		},
		onLoad() {},
		methods: {
			get() {
				uni.request({
					url: 'https://fanyi-api.baidu.com/api/trans/vip/translate', //仅为示例，并非真实接口地址。
					data: {
						q: this.a,
						appid: '20211103000990583',
						salt: '1435660288',
						from:'zh',
						to: c[1],
						sign: md5(
							`20211103000990583${this.a}1435660288l6B_1MQG1iLOOvLyUBis`
						) //appid=2015063000000001+q=apple+salt=1435660288+密钥=12345678
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded' //自定义请求头信息
					},
					success: (res) => {
						console.log(this.b)
						const result = res.data.trans_result[0].dst.split(' ')
						result.forEach((item, index) => {
							result[index] = item.slice(0, 1).toUpperCase() + item.slice(1)
						})
						result[0] = result[0].toLowerCase()
						this.b = result.join('')
						
					}
				});
			}
		}

	}

	console.log(md5("hello"))
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 400rpx;
		width: 80%;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.translate {
		border: #007AFF solid 2rpx;
		border-radius: 15rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}


	.jieguo picture{
		padding-left:25rpx ;
		color: #007AFF;
	}
	
</style>
